<!--created by han.wen@dhc.com.cn-->
<ion-view view-title="圆形头像">
  <ion-content>
    <div class="padding">
      <p class="indent">个人中心的头像显示一般用圆形头像。</p>
      <div class="text-align-c border padding-10">
        <img ng-src="./img/app_jf.png" class="border-radius-100 width-100px height-100px" alt="默认头像"/>
        <div>默认头像</div>
      </div>
      <div class="border padding-10 margin-top-10 overflow-h">
        <div class="overflow-h horizontal-center">
          <div class="row">
            <div class="col text-align-r">
              <img ng-src="./img/app_ws.png" class="border-radius-100 width-100px height-100px" style="border: 5px solid #999999;" alt="深边头像"/>
            </div>
            <div class="col">
              <div class="padding-left-10 relative" style="top: 40px;">深边头像</div>
            </div>
          </div>
        </div>
      </div>
      <p class="indent margin-top-10">核心代码是设置边框圆角100%以及设置宽高相等。ps:上传头像时，图片需要裁剪为宽高比1：1，否则头像会失真。</p>
      <code>class="border-radius-100 width-100px height-100px"</code>
    </div>
  </ion-content>
</ion-view>
